<template>
	<view>
		<view class="flex_sb h100  plr30 b-warning cf" v-show="info.mealState == 1 && info.depositState == 0">
			<text class="ft26">请先支付押金后再购买换电套餐</text>
			<view class="h50 lh50 plr24 bf warning border-r3" @click="confDeposit(3, scanDevice)">立即支付</view>
		</view>
		<view class="p30">
			<view class="plr24 pb30 bf border-r1">
				<view class="flex_sb h80 ft26 bdb">
					<text>换电柜编号：{{ info.sn || '--' }}</text>
					<text>{{ info.operatorName }}</text>
				</view>
				<view class="flex_sb h80">
					<text>{{ info.siteName }}</text>
					<text class="c9 ft26">{{ info.distance || '--' }}km</text>
				</view>
				<view class="flex mb10">
					<view class="flex_a w40 h40 whn">
						<image src="/static/ic_dw_2x.png" mode="widthFix" style="width: 22upx;height: 24upx;"></image>
					</view>
					<text class="c9">{{ info.address }}</text>
				</view>
				<view class="flex_sb h100 mb30 plr30 bgf5">
					<view class="flex_a">
						空闲仓位：
						<view class="green">{{ info.blankNum }}</view>
					</view>
					<view class="flex_a">
						可取仓位：
						<view class="warning">{{ info.availableNum }}</view>
					</view>
					<view class="flex_a">
						总仓位：

						<view class="ft30">{{ info.chanelNum }}</view>
					</view>
				</view>
				<view class="mb50 tae agent">
					<text>{{ info.agentName}}</text>
					<text class="plr10 primary"
						@click="routerLink({ path: '/pages/user/rentEle/package', query: { deviceId: info.deviceId, type: 2 ,} })">查看租电套餐</text>
				</view>
				<!-- 换电 -->
				<view class="pt50 bdt-dashed ft26">
					<view class="mb30 plr24 ptb30 bgf5 border-r1" v-if="info.batteryReturnVo">
						<view class="flex_sb h80 bdb">
							<text>上次归还记录</text>
							<text>{{ info.batteryReturnVo.ctime  }}</text>
						</view>
						<view>
							<view class="flex_a h70">
								<text class="flex1">换电柜编号：{{ info.sn || '' }}</text>
								<view class="w50 h50" @click="navigation">
									<image src="/static/daohang.png" mode="widthFix"
										style="width: 50upx;height: 50upx;"></image>
								</view>
							</view>
							<view class="h50">仓门号：{{ info.batteryReturnVo.oldCabinetNo }}</view>
							<view class="h50">电池编号：{{ info.batteryReturnVo.oldBatteryNo }}</view>
							<view class="c6">{{ info.batteryReturnVo.deviceAddress }}</view>
						</view>
					</view>
					<!--  -->
					<!-- mealState 用户套餐情况 1：已买套餐 0：未买套餐 -->
					<!-- rentState 租借状况 0.无电池（可租） 1. 有电池（可换或归还） -->
					<view class="mb60 plr24 ptb30 bgf5 border-r1" v-if="info.mealState == 1">
						<view class="h50">总换电次数：{{ info.nums }}次</view>
						<view class="h50">剩余换电次数：{{ info.num }}次</view>
						<view class="h50">套餐结束时间：{{ info.validityTime  }}</view>

						<view class="h50">当前电池编号：{{ info.rentState == 1 ? info.batteryNo : '未取电池' }}</view>
						<view class="h50">套餐电池类型：{{ info.btType }}V</view>
					</view>
					<view class="flex_aj h100 lh100 tac c9" v-if="info.mealState == 0">
						您还未
						<navigator
							:url="'/pages/user/rentEle/package?type=2&deviceId=' + info.deviceId + '&deviceNo=' + query.deviceNo"
							class="primary">购买套餐</navigator>
						？
					</view>
				</view>

				<!-- 租电 -->
				<view class="pt20" v-if="info.rentState == 0">
					<view class=" mb50 plr30">
						<u-button type="primary" :disabled="info.mealState == 0 || info.depositState == 0"
							shape="circle" throttle-time="2000" @click="xinxitixing">
							{{ info.batteryReturnVo ? '开启仓门取电' : '开始租电' }}
						</u-button>
					</view>
					<!-- <view class="" @click="anniu">
						按钮
					</view> -->
					<view class="plr24 ptb24 bd" v-show="info.instructions">
						<!-- <view class="h50">使用须知</view> -->
						<view class="c6">
							<u-parse :html="info.instructions"></u-parse>
						</view>
					</view>
				</view>


				<view v-if="info.rentState == 1">
					<view class="mb30">
						<u-button type="primary" throttle-time="2000" shape="circle"
							@click="routerLink({ path: '/pages/user/rentEle/batteryChange', query: { deviceId: info.deviceId, backFlag: 0 } })">
							更换电池
						</u-button>
					</view>
					<u-button type="primary" plain shape="circle" throttle-time="2000"
						@click="routerLink({ path: '/pages/user/rentEle/batteryChange', query: { deviceId: info.deviceId, backFlag: 1 } })">
						归还电池
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import payDeposit from '../mixins/payDeposit.js'
	import {
		scanDevice,
		getInfoByAppId,
		nextTake
	} from '@/api/user.js'
	export default {
		mixins: [payDeposit],
		data() {
			return {
				query: {},
				info: {},
				btType: '',
				getInfoByAppIdObj: {},
				xinxi: [],
			}
		},
		onLoad(e) {
			// console.log(e)
			if (e.deviceNo) {
				this.query = e
				this.deviceNo = e.deviceNo

			}
			/* else {
			this.deviceNo = 'dc993891efd4d0fd'
			this.query = { deviceNo: 'dc993891efd4d0fd', lat: 23.02067, lng: 113.75179 }
		} */
			this.getInfoByAppId()
			console.log('e', e);
		},
		async onShow() {
			this.scanDevice()
			const res = await scanDevice(this.query)
			// console.log('this.query--', this.query);
			// console.log('res----', res);
			setTimeout(() => {
				this.$store.commit('agentIdss', this.info.agentId)
			}, 1000)

		},
		methods: {
			// async anniu() {
			// 	const res = await nextTake({
			// 		orderNo: 'ZD1000001170666343'
			// 	})
			// 	// this.nextTakess = res.data
			// 	// console.log('1111111111', this.nextTakess);
			// 	this.back(-1)
			// },
			async xinxitixing() {
				await this.getInfoByAppId()
				await this.subscribeMessage()
				this.routerLink({
					path: '/pages/user/rentEle/batteryChange',
					query: {
						deviceId: this.info.deviceId
					}
				})

			},
			// 消息订阅接口
			async getInfoByAppId() {
				this.xinxi = []
				const res = await getInfoByAppId({
					appId: uni.getAccountInfoSync().miniProgram.appId
				})
				this.getInfoByAppIdObj = res.data
				// 获取value值 Object.values(this.getInfoByAppIdObj)
				// 便利value值成数组 this.xinxi
				let arrqq = Object.values(this.getInfoByAppIdObj)
				this.xinxi.push(arrqq[2])
				this.xinxi.push(arrqq[3])
				if (arrqq[5]) {
					this.xinxi.push(arrqq[5])
				}
				console.log(222222222222, this.xinxi);
			},
			// 订阅消息模板
			async subscribeMessage() {
				return new Promise((resolve, reject) => {
					uni.requestSubscribeMessage({
						tmplIds: this.xinxi,
						success: res => {
							console.log('消息订阅成功哦', res);
							resolve(res)
						},
						fail: err => {
							resolve(err)
							console.log('消息订阅失败哦', err)
						}
					})
				})
			},
			async scanDevice() {
				const res = await scanDevice(this.query)
				if (res.code != 200) {
					return this.confirm({
						content: res.msg || '操作失败',
						showCancel: false
					}).then(res => {
						this.back()
					})
				}
				this.info = res.data
				this.btType = res.data.btType
			},
			navigation() {
				uni.openLocation({
					latitude: this.info.batteryReturnVo.lat * 1,
					longitude: this.info.batteryReturnVo.lng * 1,
					// name: this.info.batteryReturnVo.siteName,
					address: this.info.batteryReturnVo.deviceAddress,
					success: () => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.agent {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
